<!DOCTYPE html>
<!--
///////////////////////////////////////////////////////////////////
//                                                               //
//            坤坤打篮球                                          //
//            开源不易，转载还请保留版权信息                       //
//            版权所有：CNMSB工作室                               //
//            官方网站：https://cnm.sb                            //
//                                                               //
///////////////////////////////////////////////////////////////////
 
    _____   _   _   __  __        _____   ____  
  / ____| | \ | | |  \/  |      / ____| |  _ \ 
 | |      |  \| | | \  / |     | (___   | |_) |
 | |      | . ` | | |\/| |      \___ \  |  _ < 
 | |____  | |\  | | |  | |  _   ____) | | |_) |
  \_____| |_| \_| |_|  |_| (_) |_____/  |____/ 
                                               
-->
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
  <meta name="format-detection" content="telephone=no,email=yes" />
  <meta name="language" content="zh-CN">
  <meta name="title" content="CNM.SB">
  <meta name="author" content="CNMSB">
  <meta name="description" content="CNM.SB，也许是一个牛*的站点！">
  <meta name="keywords" content="CNM.SB, CNMSB, CNM, SB, cnm.sb, cnmsb, cnm, sb">
  <meta name="robots" content="All">
  <title>KUNKUN PLAY BASKETBALL</title>
  <style>
    body,
    html {
      background-color: rgb(255, 255, 255);
    }
    .container{
      width: 600px;
      margin: 50px auto;
      zoom: 0.6;
    }
    .musicbox{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      /* border: 2px solid #000; */
    }
    .btn {
      padding: 20px;
      font-size: 24px;
      text-decoration: none;
      border-radius: 0px;
      display: inline-block;
      background: white;
      color: black;
      border: 2px solid black!important;
      box-shadow: 8px 8px black, 12px 14px white;
    }
    .main {
      width: 600px;
      margin: 50px auto;
      /* zoom: 0.6; */
    }
    .head {
      width: 150px;
      height: 130px;
      margin: 0 auto;
      background-color: #000;
      border: 0.001px solid #000;
      position: relative;
    }
    .left-hair {
      width: 70px;
      height: 90px;
      border-radius: 20px;
      position: absolute;
      background-color: rgb(222, 223, 225);
      transform: rotate(40deg);
      top: -30px;
      left: -9px;

    }
    .right-hair {
      width: 70px;
      height: 90px;
      border-radius: 20px;
      position: absolute;
      background-color: rgb(222, 223, 225);
      transform: rotate(-40deg);
      top: -30px;
      left: 83px;
    }
    .neck {
      width: 75px;
      height: 20px;
      background-color: #000;
      margin: 0 auto;
      border: 0.001px solid #000;
    }
    .body {
      width: 250px;
      height: 300px;
      margin: 0 auto;
      background-color: black;
      position: relative;
    }
    .left-arm {
      width: 60px;
      height: 150px;
      background-color: rgb(0, 0, 0);
      position: absolute;
      top: 30px;
      left: -80px;
      transform: rotate(60deg);
      position: relative;
    }
    .left-arm2 {
      width: 60px;
      height: 100px;
      background-color: rgb(0, 0, 0);
      position: absolute;
      top: 49px;
      left: -59px;
      transform: rotate(120deg);
      position: relative;
    }
    .right-arm {
      width: 60px;
      height: 150px;
      background-color: rgb(0, 0, 0);
      position: absolute;
      top: 40px;
      left: 250px;
      transform: rotate(-25deg);
    }
    .left-strap {
      width: 30px;
      height: 300px;
      background-color: rgb(222, 224, 223);
      position: absolute;
      top: 0;
      left: 40px;
    }
    .right-strap {
      width: 30px;
      height: 322px;
      border-radius: 10px;
      background-color: rgb(222, 224, 223);
      position: absolute;
      top: -15px;
      left: 180px;
      transform: rotate(15deg);
      z-index: 2;
    }
    .leg {
      width: 250px;
      height: 360px;
      margin: 0 auto;
      background-color: rgb(123, 121, 126);
      position: relative;
      border: 0.001px solid #ffffff;
      border-top: none;
    }
    .empty {
      width: 100px;
      height: 280px;
      background-color: rgb(255, 255, 255);
      position: absolute;
      top: 80px;
      left: 75px;
      border: 0.001px solid #ffffff;
      z-index: 2;
    }
    .stripe {
      width: 250px;
      height: 10px;
      background-color: rgb(140, 139, 144);
      position: absolute;
      left: 0;
    }
    .stripe2 {
      width: 250px;
      height: 10px;
      background-color: rgb(140, 139, 144);
      position: absolute;
      top: 35px;
      left: 0;
    }
    .foot{
      text-align: center;
      margin-top: 50px;
    }
    .basketball {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: rgb(237, 98, 41);
      border: solid 7px #000000;
      margin: 10% auto;
      position: absolute;
      top: 90px;
      left: -23px;
      animation: bounce-up 0.5s linear infinite;
    }
    .basketball:before {
      content: "";
      background: rgba(194, 34, 97, 0);
      border-right: solid 7px #000000;
      height: 85px;
      width: 122px;
      display: inline-block;
      border-radius: 80%;
      position: relative;
      top: -49px;
      left: -18px;
      border-left: solid 7px rgba(194, 34, 97, 0);
      border-right: solid 7px rgba(194, 34, 97, 0);
      border-bottom: solid 7px #000000;
    }
    .basketball:after {
      content: "";
      background: rgba(194, 34, 97, 0);
      border-right: solid 7px #010101;
      height: 122px;
      width: 122px;
      display: inline-block;
      border-radius: 84%;
      position: relative;
      top: -211px;
      left: 3px;
      border-left: solid 7px rgba(194, 34, 97, 0);
      border-right: solid 7px rgba(194, 34, 97, 0);
      border-top: solid 7px #000000;
      transform: rotate(-16deg);
    }
    .basketballline {
      width: 100px;
      height: 135px;
      border-radius: 86%;
      background: rgba(27, 36, 41, 0);
      border: solid 7px #000000;
      margin: 10% auto;
      position: relative;
      top: -123px;
      left: -32px;
      border-left: 0;
      border-top: 7px solid transparent;
      border-bottom: 7px solid transparent;
      transform: rotate(-16deg);
    }
    @keyframes bounce-up {
        25% {transform: translateY(60px)}
        50%, 100% {transform: translateY(30px)}
        75% {transform: translateY(0px)}
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>每次听到哥哥声音，就仿佛在和哥哥谈恋爱~~</h2>
    <div class="musicbox">
      <div class="music">
        <audio src="audio/s35.mp3" controls="controls" preload id="ngm"  hidden> </audio>
        <button class="btn" id="s35" onclick="s35();">你干嘛</button>
      </div>
      <div class="music">
        <audio src="audio/s28.mp3" controls="controls" preload id="ggg"  hidden> </audio>
        <button class="btn" id="s28" onclick="s28();">咯咯咯</button>
      </div>
      <div class="music">
        <audio src="audio/s34.mp3" controls="controls" preload id="jntm"  hidden> </audio>
        <button class="btn" id="s34" onclick="s34();">鸡泥钛镁</button>
      </div>
      <div class="music">
        <audio src="audio/a1.mp3" controls="controls" preload id="jjj"  hidden> </audio>
        <button class="btn" id="a1" onclick="a1();">叽叽叽</button>
      </div>
    </div>
    <div class="main">
      <div class="head">
        <div class="left-hair"></div>
        <div class="right-hair"></div>
      </div>
      <div class="neck"></div>
      <div class="body">
        <div class="left-arm">
          <div class="left-arm2">
            <div class="basketball">
              <div class="basketballline"></div>
            </div>
          </div>
        </div>
        <div class="left-strap"></div>
        <div class="right-strap"></div>
        <div class="right-arm"></div>
      </div>
      <div class="leg">
        <div class="empty">
        </div>
        <div class="stripe">
          <div class="stripe2">
            <div class="stripe2">
              <div class="stripe2">
                <div class="stripe2">
                  <div class="stripe2">
                    <div class="stripe2">
                      <div class="stripe2">
                        <div class="stripe2">
                          <div class="stripe2"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="foot">
        DESIGN BY SD
      </div>
    </div>

  </div>
  <script>
    function s35(){
     var audio = document.getElementById('ngm'); 
     if(audio.paused){                 
      audio.play();//audio.play();// 播放  
     }
     else{
      audio();
     } 
    }
    function s28(){
     var audio = document.getElementById('ggg');
     if(audio.paused){                 
      audio.play();//audio.play();// 播放  
     }
     else{
      audio();
     } 
    }
    function s34(){
     var audio = document.getElementById('jntm');
     if(audio.paused){                 
      audio.play();//audio.play();// 播放  
     }
     else{
      audio();
     } 
    }
    function a1(){
     var audio = document.getElementById('jjj');
     if(audio.paused){                 
      audio.play();//audio.play();// 播放  
     }
     else{
      audio();
     } 
    }
  </script>
</body>
</html>